<template>
  <div>
    <!-- 搜索 -->
    <common-head title="商品分类" />
    <!-- /搜索 -->
    <div class="wrap">
      <div class="navs">
        <!-- 侧边栏导航 -->
        <div class="nav-left">
          <ul>
            <li @click="navvs(cates[index].id)"
            :class="['navvs', { active: cateId == cates[index].id}]"
            v-for="(cate,index) in cates" :key="cate.id">{{cate.name}}</li>
          </ul>
        </div>
        <!-- /侧边栏导航 -->
        <div class="nav-right">
          <div class="box" v-if="!items.length">
            <h2>暂无商品！！</h2>
          </div>
          <div
            class="shang"
            @click="clickItem(item.id)"
            v-for="item in items"
            :key="item.id">
            <img :src="item.pic" alt />
            <div class="tlite">
              <h2>{{item.name | subStr(9)}}</h2>
              <p class="tlite-p">{{item.characteristic | subStr(18)}}</p>
              <div class="pic">
                <p>
                  {{item.minPrice | currency('￥')}}
                  <span>{{item.originalPrice | currency('￥')}}</span>
                </p>
                <van-icon @click.stop="clickAddItem(item)" name="cart" size="22" color="red" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-tabbar />
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { fetchCate, fetchItems } from '@api'
import { currency, subStr } from '@/filters'
import addCart from '@/mixins/addCart'
export default {
  mixins: [addCart],
  name: 'cate',
  data () {
    return {
      banners: [],
      cates: [],
      items: [],
      cateId: '211052'
    }
  },
  created () {
    this.fetchCates()
    this.fetchItems()
  },
  methods: {
    clickItem (id) {
      this.$router.push(`/detail/${id}`)
    },
    clickAddItem (item) {
      // 点击加入购物车按钮
      item = { ...item, num: 1, checked: true }
      this._addCart(item)
    },
    navvs (index) {
      this.cateId = index
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: this.cateId
      }).then(res => {
        if (res.data.code === 700) {
          this.items = []
        }
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    fetchCates () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    }
  },
  filters: {
    currency,
    subStr
  },
  components: {
    MyTabbar,
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
html{
  height: 100%;
}
.wrap {
  position: fixed;
  top: 46px;
  bottom: 50px;
  left: 0;
  width: 100%;
  height: 100%;
  .my-swipe {
    img {
      width: 100%;
    }
  }
  .navs{
    position: absolute;
    display: flex;
    width: 100%;
    height: 100%;
    background: #8f8e8e;
    .nav-left{
      width: 25%;
      text-align: center;
      line-height: 40px;
      border-right: 1px solid #aaa;
      background: #f9f9f9;
      .active{
        background: rgb(182, 226, 243);
        color: #fff;
      }
    }
    .nav-right{
      background: #f6f6f6;
      overflow: auto;
      flex: 1;
      margin-bottom: 90px;
      .box{
        font-size: 30px;
        color: #888;
        text-align: center;
        line-height: 200px;
      }
      .shang{
        display: flex;
        background: rgb(243,245,247);
        height: 100px;
        margin-bottom: 7px;
        img{
          width: 100px;
        }
        .tlite{
          position: relative;
          flex: 1;
          margin-left: 2px;
          background: #fff;
          padding-right: 10px;
          h2{
            font-size: 18px;
            margin:5px 0;
            padding: 0;
          }
          &-p{
            margin-right: 15px;
            color: #666;
          }
          .pic{
            display: flex;
            justify-content: space-between;
            padding-right: 5px;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            p{
              margin: 4px 0 0;
              color: rgb(255, 0, 76);
              font-weight: bold;
              span{
                margin-left: 5px;
                font-size: 12px;
                color: #666;
                text-decoration: line-through;
              }
            }
          }
        }
      }
    }
  }
}
</style>
